<template>
  <div>
    <el-steps :active="active" finish-status="success" style="width:50%; margin:0 auto;">
      <el-step title="添加缴费方案"></el-step>
      <el-step title="添加系统规则"></el-step>
    </el-steps>
    <!-- 新增页面内容 -->
    <div class="InsidePages" style="height:92%">
      <div class="content" style="height:86%; overflow:hidden; overflow-y:auto;" v-if="active==0">
        <el-form :model="paymentProject" label-width="150px" size="small">
          <el-form-item label="缴费方案名称" required>
            <el-input  placeholder="请输入缴费方案名称" style="width:500px;" :disabled="seeSet" v-model="paymentProject.projectName"></el-input>
          </el-form-item>
          <el-form-item label="缴费项目选择" required>
            <el-checkbox-group v-model="choPaymentItemList">
              <el-checkbox :disabled="flag=='EDIT'||seeSet" v-for="a in paymentItemList" :key="a.id" :label="a.id" name="type">{{a.itemName}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="选择学年" required>
            <el-select v-model="paymentProject.paymentTimeId" :disabled="seeSet" clearable placeholder="请选择学年">
              <el-option v-for="(item,index) in yearsList" :key="index" :label="item.timeName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户类别" required>
            <el-select v-model="paymentProject.accountTypeId" :disabled="seeSet" clearable placeholder="请选择活动区域">
              <el-option v-for="b in accountTypeList" :key="b.id" :label="b.typeName" :value="b.id">
                {{b.typeName}}
                <span v-if="b.typeScope=='Group'">（集团）</span>
                <span v-else>（学校）</span>
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择电子印章" required>
            <el-select v-model="paymentProject.paymentSealId" :disabled="seeSet" placeholder="请选择活动区域">
              <el-option v-for="c in paymentSealList" :key="c.id" :label="c.sealName" :value="c.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缴费学生来源" required>
            <el-radio-group v-model="paymentProject.studentSource" :disabled="seeSet">
              <el-radio label="Sign">报名系统</el-radio>
              <el-radio label="Student">学籍系统</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否展示明细" required>
            <el-radio-group v-model="paymentProject.isDetailed" :disabled="seeSet">
              <el-radio :label="0">不展示</el-radio>
              <el-radio :label="1">展示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="需缴费校区" required>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" :disabled="seeSet" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="choSchoolList" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="s in schoolList" :label="s.schoolId" :disabled="seeSet" :key="s.schoolId">{{s.schoolName}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>

      </div>
      <div class="content" style="height:86%" v-if="active==1">

        <!-- 条件搜托条 -->
        <div class="topSearch">
          <div class="leftBox">
            <div class="searchbox">
            <em>校区</em>
            <el-select v-model="schoolCho" @change="changeSchool" size="small" placeholder="请选择活动区域">
              <el-option v-for="s1 in schoolList1" :key="s1.schoolId" :label="s1.schoolName" :value="s1.schoolId"></el-option>
            </el-select>
            </div>
          </div>
          <div class="clear"></div>
        </div>

        <div class="contentBox" style="height:90%; overflow:hidden; overflow-y:auto;">
          <div class="fakeTable">

            <div class="top">
              <div class="topBox" style="flex:2">
                <span>学校</span>
                <span>年级</span>
              </div>
              <div class="topBox">
                <span style="width:200px;">缴费类型</span>
              </div>
              <div class="topBox" :style="{flex:itemSList.length}">
                <span v-for="(t,index1) in itemSList" :key="index1">
                  {{t.itemName}}
                  </span>
              </div>
              <div class="topBox">
                <span style="width:200px;">编辑费用</span>
              </div>
            </div>

            <div class="body">
              <div class="bodyBox">
                <div class="title" :style="{height:rulesList.length*39+'px'}">
                  <em :style="{marginTop:rulesList.length*20+'px'}">
                  {{schoolChoName}}
                  </em>
                </div>
                <div class="message">
                <div v-for="(a,index2) in rulesList" :key="index2">
                  <!-- <em>{{a.schoolName}}</em> -->
                  <em>{{a.gradeName}}</em>
                  <el-tooltip class="item" effect="dark" :content="a.paymentCategoryName" placement="top">
                  <em style="width:200px;">{{a.paymentCategoryName}}</em>
                  </el-tooltip>
                  <em v-for="(b,index3) in a.moneyList" :key="index3">
                    <b v-if="b.money==null">--</b>
                    <b v-else>{{b.money}}</b>
                  </em>
                  <em style="text-align: center; width:200px;">
                    <el-button size="mini" type="primary" :disabled="seeSet" @click="editL(a,index2)">编辑</el-button>
                    <el-button  v-if="a.moneyId!=null" size="mini" type="warning" :disabled="seeSet" @click="clearL(a,index2)">清除</el-button>
                  </em>
                </div>
              </div>
              </div>
            </div>

          </div>
        </div>


      </div>
      <div class="clear"></div>
      <div class="bts">
        <el-button style="width:100px;" v-if="active==0" @click="cancel">取消</el-button>
        <el-button style="width:100px;" v-if="active==0" type="primary" @click="next">下一步</el-button>
        <el-button style="width:100px;" v-if="active==1" @click="upSet">上一步</el-button>
        <el-button style="width:100px;" v-if="active==1&&!seeSet" type="primary" @click="finish">完成</el-button>
        <el-button style="width:100px;" v-if="active==1&&seeSet" type="primary" @click="backList">返回列表</el-button>
        </div>
    </div>
    <!-- 新增页面内容 -->

    <!-- 弹层内容 -->
    <el-dialog title="编辑缴费内容详情" :visible.sync="dialogFormVisible" width="50%">
      <div class="layerMaxHeight">
      <el-form ref="form" :model="form" label-width="auto">
        <el-form-item label="年级">
          <el-input v-model="form.gradeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="学生类型">
          <el-input v-model="form.paymentCategoryName" disabled></el-input>
        </el-form-item>
        <el-form-item v-for="(m,index4) in form.moneyList" :key="index4" :label="m.itemName">
          <!-- <el-input v-model="m.money"></el-input> -->
          <el-input-number v-model="m.money" :precision="2" :min="0" :step="0.01"></el-input-number>
        </el-form-item>
      </el-form>
      </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveSecondEvery">确 定</el-button>
    </div>
    </el-dialog>
  </div>
</template>
<script>
import mixin from '../../../mixins/tool.js'
export default {
mixins: [mixin],
data() {
  return {
     active: 0,
     checkAll:false,
     isIndeterminate: false,
     dialogFormVisible:false,
     schoolCho:'',
     schoolChoName:'',
     flag:this.$route.params.flag,
     seeSet:this.$route.params.watchOnly,
     projectId:this.$route.params.projectId,
     paymentProject:{
       accountTypeId:'',        //账户类型ID
       projectName:'',        //缴费方案名称
       paymentSealId:'',        //电子印章ID
       studentSource:'',        //学生来源
       createTime:'',
       paymentTimeId:'',
       createUserId:'',
       createUserName:'',
       deleteTime:'',
       id:'',
       isDetailed:'',
       modifyTime:'',
       projectState:'',
       state:'',
     },
     itemIds:'',
     schoolIds:'',
     choPaymentItemList:[],      //缴费项集合
     choSchoolList:[],           //学校列表
     paymentItemList:[],
     paymentSealList:[],
     accountTypeList:[],
     schoolList:[],
     schoolList1:[],
     rulesList:[],
     itemSList:[],
     yearsList:[],
     form:{},
     OldSchoolList:[],
     OldPaymentItemList:[],
     setIndex:0,
     rules:{
       projectName:[
         { required: true, message: '请输入活动名称', trigger: 'blur' }
       ],
       choPaymentItemList:[
         { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
       ]
     }
  }
},
mounted() {
  console.log(this.seeSet);
    this.getYearList();
    this.getDetailsOne();
},
methods: {
  getYearList:function(){
      this.$api.systemSetup.GetSearchList("time").then(res=>{
        console.log("获取学年列表",res)
        this.yearsList = res.data.result.timeList;
      })
    },
  // 获取第一步详情
  getDetailsOne:function(){
    this.$api.systemSetup.GetPaymentSchemeDetailOne(this.flag,this.projectId).then(res=>{
      //console.log("获取第一步详情",res);
      this.schoolList = res.data.result.schoolList;
      this.paymentSealList = res.data.result.paymentSealList;
      this.paymentItemList = res.data.result.paymentItemList;
      this.accountTypeList = res.data.result.accountTypeList;
      this.paymentProject = res.data.result.paymentProject;
      for(var a=0,len=this.paymentItemList.length;a<len;a++){
        if(this.paymentItemList[a].isCheck=="Y"){
          this.choPaymentItemList.push(this.paymentItemList[a].id);
          this.OldPaymentItemList.push(this.paymentItemList[a].id);
        }
      }
      for(var b=0,lenn=this.schoolList.length;b<lenn;b++){
        if(this.schoolList[b].isCheck=="Y"){
          this.choSchoolList.push(this.schoolList[b].schoolId);
          this.OldSchoolList.push(this.schoolList[b].schoolId);
          if(this.seeSet){
            this.schoolList1.push(this.schoolList[b]);
          }
        }
      }
      if(this.seeSet){
        this.schoolCho = this.choSchoolList[0];
        for(let c of this.schoolList){
          if(c.schoolId==this.schoolCho){
            this.schoolChoName = c.schoolName;
          }
        }
      }
    })
  },
  //返回上一步
  upSet(){
    if (this.active-- < 0) this.active = 0;
    this.flag = "EDIT";
    this.getDetailsOne();
  },
  // 下一步操作
  next(){
    if(!this.seeSet){
      this.saveStepOne();
    }else{
      this.active++;
      this.getDetailsTwo();
    }
  },
  // 保存第一步
  saveStepOne:function(){
    if(this.isNull(this.paymentProject.projectName)|| !(this.choPaymentItemList.length>0) ||this.isNull(this.paymentProject.studentSource)||this.isNull(this.paymentProject.paymentSealId)||this.isNull(this.paymentProject.accountTypeId)||this.isNull(this.paymentProject.paymentTimeId)){
      this.$message({
        message:'请填写完整当前页面内容!',
        type: 'warning'
      })
      return;
    }
    var its = "";           //定义缴费项目字符串列表
    var choPaymentItemListN = this.unique(this.choPaymentItemList);
    for(var a=0,len=choPaymentItemListN.length;a<len;a++){
      its+=choPaymentItemListN[a]+',';
    }
    var sids = "";          //定义缴费校区字符串列表
    var choSchoolListN = this.unique(this.choSchoolList);
    for(var b=0,len=choSchoolListN.length;b<len;b++){
      sids+=choSchoolListN[b]+',';
    }
    var dsids = "";          //定义"删除"缴费校区字符串列表
    var OldSchoolListN =this.unique(this.OldSchoolList);
    for(var n=0,lenN=OldSchoolListN.length;n<lenN;n++){
      if(this.choSchoolList.indexOf(OldSchoolListN[n])==-1){
        dsids+=OldSchoolListN[n]+',';
      }
    }
    // this.schoolCho = this.schoolList1[0].schoolId;
    if(this.isNull(sids)){
      this.$message({
        message:'请选择学校!',
        type: 'warning'
      })
      return;
    }
    this.$api.systemSetup.SaveStepOne(this.flag,"1",this.paymentProject,its,sids,dsids).then(res=>{
      //console.log("新增第一步返回",res);
      if(res.data.status=="SUCCESS"){
        this.$message({
          message:'新增第一步成功!',
          type: 'success'
        })
        this.projectId = res.data.result.projectId;         //操作第一步返回保存生成的projectId;
        this.schoolList1 = res.data.result.schoolList;
        this.schoolCho = this.schoolList1[0].schoolId;
        this.schoolChoName = this.schoolList1[0].schoolName;
        this.active++;
        this.getDetailsTwo();
      }
    })
  },
  unique:function(arr){
    return Array.from(new Set(arr))
  },

  changeSchool:function(event){
    for(var a=0,len=this.schoolList1.length;a<len;a++){
      if(event==this.schoolList1[a].schoolId){
        this.schoolChoName = this.schoolList1[a].schoolName;
      }
    }
    this.getDetailsTwo();
  },
  //获取第二步详情
  getDetailsTwo:function(){
    this.$api.systemSetup.GetPaymentSchemeDetailTwo(this.flag,this.projectId,this.schoolCho).then(res=>{
      //console.log("第二步获取详情",res);
      var cList = new Array();
      for(var a=0,len=res.data.result.categoryList.length;a<len;a++){
        // if(this.projectId==res.data.result.categoryList[a].projectId){
          if(this.schoolCho==res.data.result.categoryList[a].schoolId){
          res.data.result.categoryList[a].projectId = this.projectId;
          if(res.data.result.categoryList[a].moneyList.length==0){
            // res.data.result.itemList.forEach(a=>{
            //   a.money = 0;
            // })
            res.data.result.categoryList[a].moneyList =  JSON.parse(JSON.stringify(res.data.result.itemList));
          }
          cList.push(res.data.result.categoryList[a]);
        }
      }
      // this.rulesList = res.data.result.categoryList;
      this.rulesList = cList;
      this.itemSList = res.data.result.itemList;
    })
  },
  // 学校全选
  handleCheckAllChange:function(val){
    console.log(val);
    var ids = this.schoolList.map(i=>i=i.schoolId);
    console.log(ids);
    this.choSchoolList = val ? ids : [];
    this.isIndeterminate = false;
  },
  // 学校选中
  handleCheckedCitiesChange:function(value){
     let checkedCount = value.length;
      this.checkAll = checkedCount === this.schoolList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.schoolList.length;
  },
  //取消设置
  cancel:function(){
    this.$router.go(-1);
  },
  editL:function(obg,suoyin){
    this.dialogFormVisible = true;
    this.form = JSON.parse(JSON.stringify(obg));
    this.setIndex = suoyin;
  },
  clearL:function(obg,suoyin){
    this.$api.systemSetup.ClearStepTwoEvery(obg.moneyId).then(res=>{
      // console.log("清除内容返回",res)
      if(res.data.result){
        this.$message.success("费用清除成功！")
        this.getDetailsTwo();
      }
    })
  },
  // 保存第二部每条内容
  saveSecondEvery:function(){
    var that = this;
    if(that.form.moneyId==null){
      that.form.moneyId = "";
    }
    var zongNum = 0;
    this.form.moneyList.forEach(event=>{
      zongNum+=parseFloat(event.money).toFixed(2)*1000;
    })
    if(zongNum==0){
      this.$message({
        message:'费用设置为0',
        type:'warning'
      })
      // that.dialogFormVisible = false;
      // return;
    }
    that.$api.systemSetup.SaveStepTwoEvery(that.form.projectId,that.form.schoolId,that.form.sectionId,that.form.gradeId,that.form.paymentCategory,that.form.moneyId,that.form.moneyList).then(res=>{
      //console.log("第二部保存每条返回",res);
      if(res.data.status=='SUCCESS'){
        that.$message({
            message:'规则保存成功!',
            type: 'success'
        })
        // for(var i=0,len=that.rulesList.length;i<len;i++){
        //   if(that.rulesList[i].paymentCategory==that.form.paymentCategory){
          that.getDetailsTwo();
            that.rulesList[that.setIndex].moneyId = res.data.result;
        //   }
        // }
        that.form={};
        that.dialogFormVisible = false;
      }else{
        that.$message.error(res.data.message);
      }
    })
  },
  // TODO: 完成按钮操作
  finish:function(){
    this.$api.systemSetup.SaveFinshedTwo(this.projectId).then(res=>{
      //console.log("保存第二步返回",res)
      if(res.data.status=='SUCCESS'){
        this.$message({
          message:'生成账单成功',
          type:'success'
        })
        this.$router.push({name:'PaymentScheme'});
      }
    })
  },
  // 返回列表
  backList:function(){
    this.$router.push({name:'PaymentScheme'});
  }

}
}
</script>
